document.addEventListener('DOMContentLoaded',()=>{
  const circles=document.querySelectorAll('.circle')
  circles.forEach(circle=>{
    let degree=0
    const targetDegree=circle.getAttribute('data-degree')
    const color=circle.getAttribute('data-color')
    const number=circle.querySelector('.number')
    const interval=setInterval(() => {
      degree+=1
      if(degree>targetDegree){
       clearInterval(interval)
       return
      }

      circle.style.background=`conic-gradient(${color} ${degree}%,#222 0%)`
      number.innerHTML=degree+`<span>%</span>`
      number.style.color=color
    },50);
  })
})